<template>
  <section>
    <el-form ref="form"
             inline
             :model="form"
             label-width="75px">
      <el-form-item>
        <el-input v-model="form.plateNo"
                  placeholder="请输入车牌号"
                  @input="handleInput" />
      </el-form-item>
      <el-button type="primary"
                 :disabled="loading"
                 @click="pageNo=1; clean(); search();">搜索</el-button>
    </el-form>
    <el-table :data="tableData"
              border
              height="320px"
              highlight-current-row
              @row-click="handleRadio"
              @row-dblclick="handleDoubleClick">
      <el-table-column align="center"
                       width="50"
                       label="#">
        <template slot-scope="scope">
          <el-radio v-model="checked"
                    :label="scope.$index">
            {{null}}
          </el-radio>
        </template>
      </el-table-column>
      <template v-for="(column, index) in tableColumn">
        <el-table-column v-show="tableData.length > 0"
                         :key="index"
                         :prop="column.name"
                         v-bind="column" />
      </template>
    </el-table>
    <el-pagination v-show="tableColumn.length > 0"
                   background
                   layout="total, sizes, prev, pager, next"
                   class="mt20"
                   :total="total"
                   :page-sizes="pageSizeOptions"
                   :page-size.sync="pageSize"
                   :current-page.sync="pageNo"
                   :pager-count="pagerCount"
                   @size-change="clean(); search();"
                   @current-change="clean(); search();">
    </el-pagination>
  </section>
</template>

<script>
import { basic } from "@service";
export default {
  name: "VehicleSelectTable",
  inheritAttrs: true,
  data () {
    return {
      total: 0,
      pageSizeOptions: [10, 20, 50, 100],
      pageNo: 1,
      pageSize: 10,
      pagerCount: 3,
      tableData: [],
      form: { plateNo: null },
      selectData: null,
      checked: false,
      loading: false,
      tableColumn: [
        {
          label: "车牌号",
          name: "plateNo"
        },
        {
          label: "车型",
          name: "typeName",
        },
        {
          label: "车长",
          name: "length"
        },
        {
          label: "载重",
          name: "loadWeight"
        }
      ]
    };
  },
  computed: {
    mergedFilterData () {
      return {
        page: this.pageNo,
        size: this.pageSize,
        sorts: [{
          name: "createAt",
          asc: false
        }],
        status: 1,
        ...this.form
      };
    }
  },
  created () {
    this.search();
  },
  methods: {
    // 单选
    handleRadio (row) {
      this.checked = this.tableData.indexOf(row);
      this.selectData = row;
      this.$emit("active", { type: 'vehicle', ...row });
    },
    // 双击事件
    handleDoubleClick (row) {
      this.checked = this.tableData.indexOf(row);
      this.selectData = row;
      this.$emit("active", { type: 'vehicle', ...row });
    },
    handleInput (value) {
      this.form.plateNo = value;
      this.pageNo = 1;
      this.clean();
      this.search();
    },
    // 查询
    async search () {
      this.loading = true;
      let { code, data } = await basic.loadVehicles(this.mergedFilterData);
      if (code === 0) {
        this.loading = false;
        this.tableData = data.records;
      }
      this.total = data.total;
    },
    // 清空选中
    clean () {
      this.checked = false;
      this.selectData = null;
    },
  }
};
</script>
<style lang="scss" scope>
.mt20 {
  margin-top: 20px;
}
</style>

